<template>
  <div class="p-d">
    <el-row class="p-d b-f header">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="160px" size="medium">
        <el-row class="">
          <h1 class="before">网站信息</h1>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="对外显示名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主办单位：" prop="name">
              <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="承办单位：" prop="name">
              <el-input v-model="form.name2" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="name">
              <el-input v-model="form.name3" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="">
          <h1 class="before">水印信息</h1>
        </el-row>
        <el-row class="">
          <el-col :span="12">
            <el-form-item label="图片水印：" prop="name">
              <el-radio-group v-model="form.name4">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水印位置：" prop="name">
              <el-radio-group v-model="form.name5">
                <el-radio :label="1">左上</el-radio>
                <el-radio :label="2">左下</el-radio>
                <el-radio :label="2">右上</el-radio>
                <el-radio :label="2">右下</el-radio>
                <el-radio :label="2">中上</el-radio>
                <el-radio :label="2">中下</el-radio>
                <el-radio :label="2">中间</el-radio>
                <el-radio :label="2">随机</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水印类型：" prop="name">
              <el-radio-group v-model="form.name6">
                <el-radio :label="1">图片</el-radio>
                <el-radio :label="2">文字</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="">
          <h1 class="before">注册方式</h1>
        </el-row>
        <el-row class="">
          <el-col :span="12">
            <el-form-item label="前台用户注册方式：" prop="name">
              <el-radio-group v-model="form.name7">
                <el-radio :label="1">匿名</el-radio>
                <el-radio :label="2">实名</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="">
          <h1 class="before">身份认证</h1>
        </el-row>
        <el-row class="">
          <el-col :span="12">
            <el-form-item label="认证方式：" prop="name">
              <el-radio-group v-model="form.name7">
                <el-radio :label="1">口令认证</el-radio>
                <el-radio :label="2">智能密码钥匙认证</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="">
          <h1 class="before">其他参数</h1>
        </el-row>
        <el-row class="">
          <el-col :span="8">
            <el-form-item label="系统超时时间：" prop="name">
              <el-input style="width: 50%;" v-model="form.name8" placeholder="请输入" />（分钟）
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登录失败次数：" prop="name">
              <el-input style="width: 50%;" v-model="form.name9" placeholder="请输入" />（次）
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="禁止登录时长：" prop="name">
              <el-input style="width: 50%;" v-model="form.name10" placeholder="请输入" />（分钟）
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="">
          <h1 class="before">服务信息</h1>
        </el-row>
        <el-row class="">
          <el-col :span="8">
            <el-form-item label="服务咨询：" prop="name">
              <el-radio-group v-model="form.name11">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务预约：" prop="name">
              <el-radio-group v-model="form.name12">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span class="saveBtn" v-if="isFlag!=='look'">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="primary" plain @click="goBack">重置</el-button>
      </span>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      imageUrl: '',
      form: {
        name: '',
        name2: '',
        name3: '',
        name4: '',
        name5: '',
        name6: '',
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空！', trigger: 'blur' }
        ],
      },
    };
  },
  created() {
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
}
</script>

<style lang="less" scoped>
  .heightStyle {
    height: 85vh;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
